<template>
    <div id="nav">

        <router-link class="tab-bar-item" to="/">
            <div class="icon"><van-icon name="wap-home-o" /></div>
            <div>{{$t('shop.menu.home')}}</div>
        </router-link>
        <router-link class="tab-bar-item" to="/category">
            <div class="icon"><van-icon name="qr" /></div>
            <div>{{$t('shop.menu.category')}}</div>
        </router-link>
        <router-link class="tab-bar-item" to="/faq">
            <div class="icon"><van-icon name="comment-o" /></div>
            <div>{{$t('shop.menu.faq')}}</div>
        </router-link>
        <router-link class="tab-bar-item" to="/me">
            <div class="icon"><van-icon name="user-o" /></div>
            <div>{{$t('shop.menu.me')}}</div>
        </router-link>


    </div>
</template>

<script>
    export default {
        name: "MenuBar"
    }
</script>

<style scoped lang="less">
    #nav {
        display: flex;
        position: fixed;
        left:0;
        right:0;
        bottom:0;
        box-shadow: 0 -3px 1px rgba(255, 192, 0, 0.1);
        flex-direction: row;
        align-content: center;
        align-items: center;
        margin: auto;
        max-width: 550px;
        z-index: 10;
        /* background-color: #DDFDFA; */
        background: #000;
    a {

        color: #FFFFFF;

    &.router-link-exact-active {
         color: #FFBF00;
     }
    }

    .tab-bar-item {
        flex: 1;
        text-align: center;
        height:66px;
        font-size:14px;
    .icon {
        margin-top: 8px;
        vertical-align: middle;
        display: inline-block;
        font-size:16px;
    }
    }


    }
</style>